<template>
  <div id="app">
    <div id="viewBox">
      <down-load v-if="showDownload"/>
      <loading-view v-if="showLoading"/>
      <customer-notice v-if="showCustomerNotice"/>
      <main-tain v-if="showMaintain"/>
      <transition :name="pageAnimate">
        <router-view v-if="isRouterAlive"/>
      </transition>
      <meiqia-service v-if="showMq"/>
      <div class="n1" v-if="browser === 2"></div>
      <div class="n2" v-if="browser === 2"></div>
    </div>
  </div>
</template>
<!--各个fixed定位的index       maintain 10 ,  customer-notice 6  loading 5  ,,,, download 4 ,,,,  n1,n2  3-->
<!--n1,n2为空白灰色页面，覆盖pc两侧动画残影-->
<script>
  const downLoadViews = ['/entrance','/edit_pws','/power_list','/cash_withdraw'];//需要显示下载app的页面
  import './common/js/common';
  export default {
    name: 'App',
    data() {
      return {
        showDownload: false, //显示下载
        showLoading: false, //显示加载动画
        pageAnimate: 'no',//动画滑动class：左，右
        needAnimate: false, //是否需要动画
        browser: 0 , /*浏览器类型：1移动端 2电脑端*/
        showCustomerNotice : this.$store.state.showCustomerNotice, //是否显示迁移公告
        showMaintain : this.$store.state.maintain,//是否显示维护公告
        isRouterAlive: true , //刷新view
        showMq : false, //是否显示meiqia会话
      }
    },
    components: {
      MeiqiaService : resolve => { require(['./components/service'], resolve) }, /*客服*/
      DownLoad: resolve => { require(['./components/downLoad'], resolve) }, /*下载app*/
      LoadingView: resolve => { require(['./components/loading'], resolve) }, /*加载动画*/
      CustomerNotice: resolve => { require(['./components/CustomerNotice'], resolve) } ,/*新用户转移公告*/
      MainTain: resolve => { require(['./components/maintain'], resolve) }/*维护公告*/
    },
    watch: {
      '$route.path'(path){
        let views = ['/entrance'];//需要显示meiqia会话的页面
        let showMq = views.indexOf(path) >= 0;
        this.showMq = showMq ? true : false;
        if(!showMq && window._MEIQIA){
          _MEIQIA('hidePanel'); //如果打开了meiqia会话框，应该关闭
        }
      },
      '$store.state.maintain'(status) {
        this.showMaintain = status; //是否显示维护公告
      },
      '$store.state.gologin'(status) {
        if (status) {
          //强制跳转登录
          this.$router.push({path: 'login' , query :{inviter_code : this.$store.state.inviter_code , to : this.$route.fullPath}} );
          this.$store.commit('gologin', false);
        }
      },
      '$store.state.showCustomerNotice'( status ) {
        this.showCustomerNotice = status ? status : false;//是否显示新用户转移公告
      },
      '$store.state.loading'() {
        this.showLoading = this.$store.state.loading;//全局loading动画
        // this.showLoading == true ? this.noScroll() : this.canScroll();
      },
      '$route'(to, from) {
        let name = to.path;
        let query = to.query;
        if(name.indexOf('/entrance') >=0 && query.inviter_code ){
          this.showDownload = false;
        } else {
          this.showDownload = downLoadViews.indexOf(to.path) == -1 ? false : true;
        }
        if( this.needAnimate === true ){
          if( to.query.go ){
            this.pageAnimate = 'slide-left';
          }else{
            if (from.path == '/') {
              this.pageAnimate = 'no';
            } else{
              let toIndex = to.meta.index || false;
              let fromIndex = from.meta.index || false;
              if(toIndex && fromIndex){
                this.pageAnimate = fromIndex <= toIndex ? 'slide-left' : 'slide-right';
              }else{
                this.pageAnimate = 'no';
              }
            }
          }
        }
      },
    },
    created() {
      this.showDownload = downLoadViews.indexOf(this.$route.path) != -1 ? true : false;
    },
    provide() {
      return {
        reload: this.reload //inject : ['reload']  this.reload，页面注入reload方法 可以刷新页面
      }
    },
    methods:{
      reload () {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      }
    },
    mounted() {
      this.browser = this.browserType();
      if( this.browser == 2 ){
        this.needAnimate = true;//只支持pc切换动画
      }
      this.needAnimate = true;//都支持
    },
  }
</script>
<style type="text/less" lang="less">
  body *{margin: 0;padding: 0;box-sizing: border-box;line-height: 103%;}
  .td-btn-logo{border:0!important;border-left: 0.01rem solid#E8E8E8!important;box-sizing: border-box!important;}
  body .td-outer-wrapper {font-size: 14px!important;}/*同盾验证码弹窗，字体问题*/
  body .td-btn-cnt .td-btn-wrapper .td-btn-content {font-size: 0.28rem!important;}
  body .td-btn-cnt .td-logo-icon {
    width: 0.38rem !important;
    height: 0.38rem !important;
    background: url("common/imgs/tongdun.png") center center no-repeat!important;
    background-size: 98% 98%!important;
  }
  /*background: url("") center center no-repeat!important;*/

  html,body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;-moz-text-size-adjust:100%!important; }
  body,html{
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  body{margin:0;color: #262626;height: 100%;;background: #f8f8f8;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
  body::-webkit-scrollbar {width:0px; height:0px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  body::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} /*定义滚动条轨道 内阴影+圆角*/
  body::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} /*定义滑块 内阴影+圆角*/
  /*.pc_style::-webkit-scrollbar {width:0px; height:0px; background-color:transparent;} !*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*!*/
  /*.pc_style::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} !*定义滚动条轨道 内阴影+圆角*!*/
  /*.pc_style::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} !*定义滑块 内阴影+圆角*!*/
  #app {font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;font-size: 0.28rem;
    height: 100%;background: #F8F8F8;margin: 0 auto;}
  html{height: 100%;}
  /*.pc_style{position: relative;}!*overflow: hidden;overflow-y: scroll;*!*/
  #viewBox{z-index: 1;left: 0;top:0;width: 100%;height: 100%}/*position: absolute;*/
  #views{min-height: 100%;background: #f8f8f8;}
  @media screen and (max-width: 1024px) {
    #app {width:100%;position: relative}
    #app #views{width: 100%;left: 0;top:0;}
  }
  @media screen and (min-width: 1025px) {
    #app{width:600px;position: relative}
    #app #views{width: 100%;}
    .n1{
      position: fixed;z-index: 3;left:0;top:0;height: 100%;width:calc( 50% - 300px );background: #8d8d8d;
    }
    .n2{
      position: fixed;z-index: 3;top:0;height: 100%;width:calc( 50% - 300px );background: #8d8d8d;right:0;
    }
  }
  .loadToast{padding:0.3rem 0}
  #app {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: left;color: #262626;}
  .toastStyle{background-color:#000!important;padding: 13px!important;}
  .toastStyle>span{color: #fff!important;font-size: 0.28rem!important;}
  input{background: #fff;border:0;}
  input[type=number]{appearance: none;-moz-appearance: none;-webkit-appearance: none;}
  input[type=number]{appearance: none;-moz-appearance:textfield!important;}
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
  input,button,textarea,select{outline: none;border:none;margin:0;-webkit-tap-highlight-color: rgba(240,240,240,0);padding:0;}
  button:hover,select:hover{cursor: pointer}
  button:disabled:hover,input:disabled:hover,select:disabled:hover{cursor: not-allowed}
  ul,ul li{list-style: none}
  a:link,a:visited,a:hover,a:active{text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);color: #262626;text-align: center;display: inline-block}
  a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
  input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
  input::-moz-placeholder {color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
  input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
  input{font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;font-size: 0.32rem;color: #262626}
  .selectGreyJt{vertical-align:top;height:0.35rem;appearance: none; -moz-appearance: none;-webkit-appearance: none;background: url(common/imgs/selectjt.png) no-repeat scroll right center; padding-right: 0.3rem;background-size: 0.15rem;padding-left: 0.3rem;background-position-x: 96%;}
  .submitNot{width: 100%;background: #EFEFEF;font-size: .34rem;border-radius: 1rem;text-align: center;line-height: 1.2rem;height: 1.2rem;}
  .submit{width: 100%;background: #ffd203;font-size: .34rem;border-radius: 1rem;text-align: center;line-height: 1.2rem;height: 1.2rem;}
  .cover{z-index: 5;background: rgba(0,0,0,0.5);position: fixed;height: 100%;width: 100%;left: 0;top:0;overflow: hidden;-webkit-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
  @media screen and (min-width: 1025px) {  .cover{width: 600px;left: 50%;margin-left: -300px;}  }
  .noBorder{border:0;}
  .middle{vertical-align: middle}
  .noBackground{background: none;}
  .textCenter{text-align: center}
  .textLeft{text-align: left}
  .textRight{text-align: right}
  .width100{width: 100%;}
  .height100{height: 100%}
  .nopadding{padding:0;}
  .publicCover{width:100%;height:100%;position: fixed;background: rgba(9,9,9,0.6);z-index: 10;top:0;left:0;}
  .paddingl_r{padding-left:0.3rem;padding-right: 0.3rem;}
  .paddinglrtb{padding: .3rem;}
  .floatleft{float: left}
  .floatright{float: right}
  .overhidden{overflow: hidden}
  .hoverhand:hover{cursor: pointer}
  .boxshadow{box-shadow: 0px 0px 5px #dbdbdb;-moz-box-shadow: 0px 0px 5px #dbdbdb;-web-kit-shadow: 0px 0px 5px #dbdbdb;}
  .flexStyle{display: -webkit-box;display: -webkit-flex;display: flex;align-items: center;-webkit-align-items:center;}
  .flexNone{flex:none;-ms-flex: none;-webkit-flex: none;}
  .alignItemsStart{align-items: flex-start;-webkit-align-items: flex-start}
  .spaceBet{justify-content: space-between;-webkit-justify-content: space-between}
  .spaceAround{justify-content: space-around;-webkit-justify-content: space-around}
  .flexRow{flex-direction: column;-webkit-flex-direction: column;flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-flow: row wrap;-webkit-flex-flow: row wrap}
  .loadToast{text-align: center;font-size: 0.24rem;line-height: 0.35rem;color:#9B9B9B;}
  .yellowbtn{background: #ffd203;border-radius: 1rem;height: 0.88rem;font-size: 0.34rem;margin-top: 0.38rem;display: inline-block;width: 100%;}
</style>
<style scoped>
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 400ms;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
<style>
  .scale-enter-active {
    animation-name: scaleInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .scale-leave-active {
    animation-name: scaleOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  @keyframes scaleInUp {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
      visibility: visible;
      opacity: 0;
    }
    to {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes scaleOutDown {
    0% {
      transform:scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
    to {
      visibility: hidden;
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
    }
  }
/*-----------*/
  .slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, -100%, 0) translateY(-50%) rotateX(-90deg);
      visibility: visible;
      opacity: 0;
    }
    to {
      transform: translateZ(0) translateY(-50%) rotateX(0deg);
      opacity: 1;
    }
  }
  @keyframes slideOutDown {
    0% {
      transform: translateZ(0) translateY(-50%)  rotateX(0deg);
      opacity: 1;
    }
    to {
      visibility: hidden;
      opacity: 0;
      transform: translate3d(0, -100%, 0) translateY(-50%)  rotateX(-90deg);
    }
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  /*-----------折叠展开动画----------*/
  .open-enter-active, .open-leave-active {
    transition: all 0.5s ease;
  }
  .open-enter, .open-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }

</style>
